<template>
  <div ref="chartRef" style="width:100%;height:280px;"></div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, Ref } from 'vue';

  import { useECharts } from '@/hooks/web/useECharts';

  import { defineProps } from 'vue';

  import { getStatisticaldata } from '@/api/dashboard/console';
 
  const props = defineProps(['parentData'])
  console.log('**** props:',props.parentData);
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

  onMounted(async() => {
    const sdata = await getStatisticaldata({project: props.parentData.split(',')[0],kinmuym:props.parentData.split(',')[1]});
    type BarLabelOption = NonNullable<echarts.BarSeriesOption['label']>;

    const labelOption: BarLabelOption = {
      show: false,
      position: 'insideTopLeft',
      distance: 0,
      align: 'left',
      verticalAlign: 'top',
      rotate: 90,
      formatter: '{c}  {name|{a}} 人',
      fontSize: 16,
      rich: {
        name: {}
      }
    };
    setOptions({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['管理人员（出勤）', '管理人员（缺勤）', '工人（出勤）', '工人（缺勤）']
      },
      toolbox: {
        show: false,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          mark: { show: true },
          dataView: { show: false, readOnly: false },
          magicType: { show: true, type: ['line', 'bar', 'stack'] },
          restore: { show: false },
          saveAsImage: { show: true }
        }
      },
      xAxis: [
        {
          type: 'category',
          axisTick: { show: false },
          data: sdata.lxAxis
        }
      ],
      yAxis: [
        {
          type: 'value',
          interval: 50,
          axisLabel: {
            formatter: '{value}人'
          }
        }
      ],
      series: [
        {
          name: '管理人员（出勤）',
          type: 'bar',
          barGap: 0,
          label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: sdata.lm_onsitecnt
        },
        {
          name: '工人（出勤）',
          type: 'bar',
          label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: sdata.lw_onsitecnt
        },
        {
          name: '管理人员（缺勤）',
          type: 'bar',
          label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: sdata.lm_unsitecnt
        },
        {
          name: '工人（缺勤）',
          type: 'bar',
          label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: sdata.lw_unsitecnt
        }
      ],
    });
  });

</script>
